<template>
    <div class="app-home">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-swipe :autoplay="3000" class="home-swipe" :style="'height:'+(bannerList.length===0?'208px':'auto')">
                <van-swipe-item v-for="(banner, index) in bannerList" :key="index">
                    <img :src="banner.ad_img" :alt="banner.title" @click="bannerClick" />
                </van-swipe-item>
            </van-swipe>
            <div class="guide-list">
                <div class="item">
                    <div class="count">
                        <p class="tit">今日业绩统计</p>
                        <div class="count_num">{{totalAmount}}</div>
                    </div>
                </div>
                <div class="item setting">
                    <div class="content">
                        <div class="step-list">
                            <div class="step">
                                <span class="img-one"></span>
                                <div>1.激活</div>
                            </div>
                            <div class="step" @click="$router.push({'path': 'topup', query: {redirectURL: '/home'}})">
                                <span class="img-two"></span>
                                <div>2.充值</div>
                            </div>
                            <div class="step">
                                <span class="img-three"></span>
                                <div>3.流水</div>
                            </div>
                        </div>
                        <div class="operate-button" :class="{ hide: finishSetting }"
                            @click="$router.push({'path': '/setup/graba'})">激活帐户</div>
                    </div>
                    <div class="title">请先完成抢单设置</div>
                </div>
                <div class="item shopping">
                    <div class="content">
                        <div class="step-list">
                            <div class="step">
                                <span class="img-one"></span>
                                <div class="text">
                                    充值余额，系统自动按照余额金额，匹配对应金额买单
                                    <div class="num">1</div>
                                </div>
                                <div class="circle"></div>
                            </div>
                            <div class="step">
                                <span class="img-two"></span>
                                <div class="text">
                                    会员开始抢单，抢单成功，扣除对应金额的余额
                                    <div class="num">2</div>
                                </div>
                                <div class="circle"></div>
                            </div>
                            <div class="step">
                                <span class="img-three"></span>
                                <div class="text">
                                    平台往会员设置的收款账户转账，确认收款后，ORG自动扣除
                                    <div class="num">3</div>
                                </div>
                                <div class="circle"></div>
                            </div>
                            <div class="step">
                                <span class="img-four"></span>
                                <div class="text">
                                    根据会员的收款方式结算佣金，会员推荐他人产生业绩流水，平台根据流水进行佣金返点
                                    <div class="num">4</div>
                                </div>
                                <div class="circle"></div>
                            </div>
                        </div>
                    </div>
                    <div class="title">新人必读</div>
                </div>
                <div class="start" @click="startGrab">立刻抢单</div>
            </div>
            <tab-bar />
        </van-pull-refresh>
    </div>
</template>
<script>
import {
  mapGetters
} from 'vuex';
export default {
  name: 'home',
  data() {
    return {
      isLoading: false,
      benefits: 0,
      settlement: 0,
      totalAmount: 0.00,
      bannerList: []
    };
  },
  components: {},
  computed: {
    ...mapGetters([
      'settingInfo'
    ]),
    finishSetting: {
      get() {
        return this.settingInfo.isSetPayPass && this.settingInfo.reserveFund > 0 && this.settingInfo
          .isSetCollection;
      }
    }
  },
  // 缓存了页面使用 activated钩子
  created() {
    this.getCount();
    this.fetchBannerList();
  },
  methods: {
    onRefresh() {
      this.getCount();
      this.fetchBannerList();
    },
    // 获取业绩统计
    getCount() {
      this.$API.user.getCountApi({}).then(res => {
        if (!res.code) {
          this.totalAmount = res.data.totalAmount.toFixed(2);
        }
      }).finally(() => {
        setTimeout(() => {
          this.$set(this, 'isLoading', false);
        }, 500);
      });
    },
    // 获取banner图片列表
    fetchBannerList() {
      this.$API.user.getBannerList('index').then(res => {
        if (!res.code) {
          this.$set(this, 'bannerList', res.data);
        }
      });
    },
    // 点击banner
    bannerClick(banner) {
      if (banner.type === 1) {

      }
      // 跳转界面
    },
    // 立刻抢单
    startGrab() {
      if (!this.finishSetting) {
        this.$toast('请完成抢单设置!');
        this.$router.push({
          path: '/setup/graba'
        });
        return;
      }
      this.$router.push({
        path: '/grabsheet'
      });
    }
  }
};
</script>
<style lang="less" scoped>
    .app-home {
        .home-swipe {

            // height: 328px;
            /deep/ .van-swipe__indicator {
                width: 12px;
                height: 12px;
                background: #FFF;
                border-radius: 50%;
                opacity: 1;

                &:not(:last-child) {
                    margin-right: 16px;
                }
            }

            /deep/ .van-swipe__indicator--active {
                width: 22px;
                height: 9px;
                background: #E31D1A;
                border-radius: 5px;
            }
        }

        .guide-list {
            background-color: #F37F0A;
            display: flex;
            // justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 20px 20px 184px 20px;
            box-sizing: border-box;

            .count {
                width: 690px;
                min-height: 109px;
                background: #ffffff;
                border-radius: 20px;
                padding: 12px 20px 10px;
                box-sizing: border-box;

                .tit {
                    color: #c60a17;
                    font-size: 20px;
                }

                .count_num {
                    font-size: 36px;
                    color: #c60a17;
                }
            }

            .item {
                width: 100%;
                position: relative;
                display: inline-flex;
                justify-content: center;

                &:nth-child(2) {
                    margin-top: 60px;
                }

                .title {
                    position: absolute;
                    width: 322px;
                    height: 54px;
                    font-size: 30px;
                    font-weight: bold;
                    color: #FFF;
                    border-bottom-left-radius: 20px;
                    border-bottom-right-radius: 20px;
                    background-color: #F37F0A;
                    text-align: center;
                }
            }

            .setting .content {
                width: 690px;
                // height: 372px;
                background: #FFF;
                margin: 0 auto;
                margin-top: 20px;
                border-radius: 24px;
                padding: 40px;
                box-sizing: border-box;
                position: relative;
                display: inline-flex;
                flex-direction: column;
                align-items: center;

                .step-list {
                    width: 100%;
                    ;
                    display: inline-flex;
                    justify-content: space-between;

                    .step {
                        font-size: 24px;
                        font-weight: 500;
                        color: #E31D1A;
                        text-align: center;

                        span {
                            width: 123px;
                            height: 123px;
                            display: block;
                            background-repeat: no-repeat;
                            background-size: contain;
                            margin: 0 auto;
                        }

                        .img-one {
                            background-image: url('../../assets/images/icon-home-setting-recharge.png');
                        }

                        .img-two {
                            background-image: url('../../assets/images/icon-home-setting-pay.png');
                        }

                        .img-three {
                            background-image: url('../../assets/images/icon-home-setting-shopping.png');
                        }
                    }
                }

                .operate-button {
                    bottom: 40px;
                    width: 483px;
                    height: 59px;
                    margin-top: 75px;
                    background: #FFF;
                    border: 1.5px solid #F79201;
                    border-radius: 30px;
                    text-align: center;
                    line-height: 59px;
                    font-size: 30px;
                    font-weight: 500;
                    color: #F79201;
                }

                .hide {
                    display: none;
                }
            }

            .shopping .content {
                width: 690px;
                background: #FFF;
                margin: 0 auto;
                margin-top: 20px;
                border-radius: 24px;
                padding: 40px;
                box-sizing: border-box;
                position: relative;
                display: inline-flex;
                justify-content: center;

                .step-list {
                    width: 100%;
                    display: inline-flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .step {
                        width: 100%;
                        height: 100%;
                        position: relative;
                        margin-top: 100px;

                        .text {
                            position: absolute;
                        }

                        span {
                            position: absolute;
                            display: block;
                            background-repeat: no-repeat;
                            background-size: contain;
                            margin: 0 auto;
                        }

                        .circle {
                            position: absolute;
                            width: 96px;
                            height: 96px;
                            background: #F79201;
                            opacity: 0.07;
                            border-radius: 50%;
                            bottom: 20px;
                        }

                        .num {
                            position: absolute;
                            width: 76px;
                            font-size: 143px;
                            color: #37E0DE;
                            opacity: 0.5;
                            top: -100px;
                            left: 40px;
                        }

                        &:nth-child(2n) {
                            height: 212px;

                            .text {
                                width: 230px;
                                right: 0;
                                bottom: 48px;
                            }

                            span {
                                right: 280px;
                            }

                            .circle {
                                bottom: 26px;
                                right: 175px;
                            }
                        }

                        &:nth-child(2n+1) {
                            height: 190px;

                            .text {
                                width: 218px;
                                left: 34px;
                                bottom: 37px;
                            }

                            span {
                                left: 312px;
                            }
                        }

                        .img-one {
                            width: 184px;
                            height: 187px;
                            background-image: url('../../assets/images/icon-home-shopping-step1.png');
                        }

                        .img-two {
                            width: 202px;
                            height: 212px;
                            background-image: url('../../assets/images/icon-home-shopping-step2.png');
                        }

                        .img-three {
                            width: 233px;
                            height: 148px;
                            background-image: url('../../assets/images/icon-home-shopping-step3.png');
                        }

                        .img-four {
                            width: 257px;
                            height: 175px;
                            background-image: url('../../assets/images/icon-home-shopping-step4.png');
                            bottom: 37px;
                        }
                    }
                }

            }
        }

        .start {
            width: 483px;
            height: 59px;
            background: #FFF;
            border: 1px solid #F79201;
            border-radius: 30px;
            font-size: 30px;
            font-weight: 500;
            color: #F79201;
            margin-top: 34px;
            text-align: center;
            line-height: 59px;
        }

        .top-name {
            font-size: 40px;
            color: #333;
            padding: 0 20px;
        }

        .screening {
            display: flex;
            padding: 20px 0;

            .F-Screening {
                margin-right: 20px;
            }

        }
    }
</style>
